{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>加载提示器</li>
  </ol>
<section class="demo-section">
<div id="pageContent">







<section><header><h3>基本示例</h3></header><article><p>使用辅助类 <code>.load-indicator</code> 和 <code>.loading</code> 即可显示一个加载指示器。</p><div class="example">
  <div class="load-indicator loading" style="width: 100px; height: 100px; background: #eee"></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc5g8ejhh"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"load-indicator loading"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#eee</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><div class="alert alert-primary">
  <h4>注意</h4>
  <p>加载指示器辅助类 <code>.load-indicator</code>会自动应用 <code>position: relative</code> 样式，通常情况下没有问题，但是如果 <code>.load-indicator</code> 类所属的元素已将 <code>position</code> 设置为了 <code>absolute</code> 或 <code>fixed</code> 则需要重新覆盖 <code>.load-indicator</code> 的设置，否则可能导致界面样式不符合预期。</p>
</div></article></section>




<section><header><h3>包含提示文本示例</h3></header><article><p>使用 <code>[data-loading]</code> 属性来设置用于显示的提示文本。</p><div class="example">
  <div data-loading="正在加载..." class="load-indicator loading" style="width: 100px; height: 100px; background: #eee"></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-loading</span><span class="pun">=</span><span class="atv">"正在加载..."</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"load-indicator loading"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#eee</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre></article></section>





<script>
$(function() {
    $('#loadIndicator1ToggleBtn').on('click', function() {
        $('#loadIndicator1').toggleClass('loading');
    });
});
</script>

<section><header><h3>使用 JS 控制</h3></header><article><p>加载指示器仅提供 CSS 样式，如果需要动态控制，只需要使用 JS 在 <code>.load-indicator</code> 元素上添加 <code>.loading</code> 类即可显示正在加载状态，如果要移除正在加载状态的显示只需要使用 JS 移除 <code>.loading</code> 类。</p><div class="example">
  <div data-loading="正在加载..." class="load-indicator" style="width: 100px; height: 100px; background: #eee; margin-bottom: 10px" id="loadIndicator1"></div>
  <button type="button" class="btn btn-primary" id="loadIndicator1ToggleBtn">显示/隐藏正在加载状态</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-loading</span><span class="pun">=</span><span class="atv">"正在加载..."</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"load-indicator"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#eee; margin-bottom: 10px</span><span class="atv">"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loadIndicator1"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loadIndicator1ToggleBtn"</span><span class="tag">&gt;</span><span class="pln">显示/隐藏正在加载状态</span><span class="tag">&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#loadIndicator1ToggleBtn'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $</span><span class="pun">(</span><span class="str">'#loadIndicator1'</span><span class="pun">).</span><span class="pln">toggleClass</span><span class="pun">(</span><span class="str">'loading'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>



<style>
#loadIndicator3.load-indicator:after {content: '\e97b'}
</style>



<section><header><h3>修改图标</h3></header><article><p>使用 CSS 来修改用于指示加载中的动画图标。</p><div class="example">
  <div id="loadIndicator3" class="load-indicator loading" style="width: 100px; height: 100px; background: #eee"></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"load-indicator loading"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#eee</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="pun">.</span><span class="pln">load</span><span class="pun">-</span><span class="pln">indicator</span><span class="pun">:</span><span class="pln">after </span><span class="pun">{</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> </span><span class="str">'\e97b'</span><span class="pun">}</span></code></pre></article></section>










<section><header><h3>与其他组件一起使用</h3></header><article><p>加载指示器辅助类 <code>.load-indicator</code> 和 <code>.loading</code> 几乎可以与任何组件一起使用。</p><h4>在按钮上使用</h4><div class="example">
    <button type="button" class="btn load-indicator loading">按钮示例</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn load-indicator loading"</span><span class="tag">&gt;</span><span class="pln">按钮示例</span><span class="tag">&lt;/button&gt;</span></code></pre><h4>在面板中使用</h4><div class="example">
  <div class="panel load-indicator loading" data-loading="正在处理...">
    <div class="panel-heading" contenteditable="">面板标题</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel load-indicator loading"</span><span class="pln"> </span><span class="atn">data-loading</span><span class="pun">=</span><span class="atv">"正在处理..."</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="pln"> </span><span class="atn">contenteditable</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">面板标题</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="pln"> </span><span class="atn">contenteditable</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">面板内容</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>在表单中使用</h4><div class="example">
<form class="form-horizontal load-indicator loading" data-loading="正在提交，请稍后...">
  <div class="form-group">
    <label for="exampleInputAccount4" class="col-sm-2">账号</label>
    <div class="col-md-6 col-sm-10">
      <input type="text" class="form-control" id="exampleInputAccount4" placeholder="电子邮件/手机号/用户名">
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword4" class="col-sm-2">密码</label>
    <div class="col-md-6 col-sm-10">
      <input type="password" class="form-control" id="exampleInputPassword4" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputAddress1" class="col-sm-2">地址</label>
    <div class="col-sm-3">
      <select class="form-control" id="exampleInputAddress1">
        <option>北京</option>
        <option>上海</option>
      </select>
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="exampleInputAddress2" placeholder="市/县">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="exampleInputAddress3" placeholder="详细地址">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> 记住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>
</div></article></section></div>
</section>
{/block}